<template>
	<view class="main">
		<view class="top">
			<uni-search-bar focus cancelButton="none" @confirm="confirm" class="search"
				:placeholder="$t('index.seachPlaceholder')"></uni-search-bar>
			<text @click.stop="goBack">{{ $t('search.cancel') }}</text>
		</view>
		<view class="hot">
			<view class="title">
				{{ $t('search.hot') }}
			</view>
			<view class="list">
				<text class="item" v-for="(item,index) in hotList" :key="index"
					@click="toSearch(item.name)">{{item.name}}<text
						v-if="item.isHot">{{$t('search.isHot')}}</text></text>
			</view>
		</view>

		<view class="hot">
			<view class="title">
				<text>
					{{ $t('search.history') }}
				</text>
				<image @click="clearHistory" src="../../static/image/clear.png" mode=""></image>
			</view>
			<view class="list">
				<text class="item" v-for="(item,index) in list" @click="toSearch(item)" :key="index">{{item}}</text>
				<text class="item" style="height: 0;"></text>
				<text class="item" style="height: 0;"></text>
				<text class="item" style="height: 0;"></text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		unique
	} from "../../utils/utils.js"
	export default {
		data() {
			return {
				hotList: [],
				list: []
			}
		},
		onLoad() {
			this.getHotList()
		},
		onShow() {
			let items = uni.getStorageSync('lists')
			if (items) {
				this.list = JSON.parse(items)
				this.list = unique(this.list)
				console.log(this.list)
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			clearHistory() {
				let vm = this
				uni.showModal({
					title: '清空',
					content: '是否清空搜索记录？',
					success: function(res) {
						if (res.confirm) {
							uni.removeStorageSync('lists');
							vm.list = []
							uni.showToast({
								title: "操作成功",
								icon: "none"
							})
						} else if (res.cancel) {

						}
					}
				});
				uni.removeStorageSync('lists');
			},
			getHotList() {
				this.$httpRequest({
					url: "app/api/hotdata.php",
					method: "POST",
					data: {
						service: "moodle_mobile_app"
					}
				}).then(res => {
					this.hotList = res.hotSearch
				})
			},
			confirm(e) {
				let items = uni.getStorageSync('lists')
				if (items) {
					this.list = JSON.parse(items)
					this.list.unshift(e.value)
					this.list = unique(this.list)
					console.log(this.list)
					uni.setStorageSync('lists', JSON.stringify(this.list))
				} else {
					items = [e.value]
					uni.setStorageSync('lists', JSON.stringify(items))
					this.list = [e.value]
				}
				uni.navigateTo({
					url: "/pages/clazzList/clazzList?path=search&value=" + e.value
				})
			},
			toSearch(val) {
				let index = this.list.findIndex(ele => ele == val)
				if (index != -1) {
					this.list.splice(index, 1)
				}
				this.list.unshift(val)
				this.list = unique(this.list)
				uni.setStorageSync('lists', JSON.stringify(this.list))
				// return
				uni.navigateTo({
					url: "/pages/clazzList/clazzList?path=search&value=" + val
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 90%;
		margin: 0 auto;

		.top {
			margin-top: 104rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.search {
				width: 85%;
			}

			text {
				flex: 1;
				text-align: center;
				font-size: 28rpx;
				color: #6E7580;
			}
		}

		.hot {
			margin-top: 48rpx;
			width: 100%;
			min-height: 268rpx;
			height: auto;
			border-bottom: 2rpx solid #EBEDF0;
			padding-bottom: 20rpx;

			&.hot:last-child {
				border: none;
			}

			.title {
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #0F1826;
				text-align: left;
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.list {
				margin-top: 32rpx;
				display: flex;
				justify-content: space-between;
				align-items: baseline;
				flex-wrap: wrap;
				color: #6E7580;
				min-height: 200rpx;

				.item {
					background: #F5F5F5;
					border-radius: 28rpx;
					width: 160rpx;
					text-align: center;
					font-size: 28rpx;
					font-weight: 500;
					color: #6E7580;
					display: block;
					height: 56rpx;
					line-height: 56rpx;
					padding: 0 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin: 20rpx 0;

					text {
						font-size: 24rpx;
						color: #FF3673;
						margin-left: 3px;
					}
				}
			}
		}
	}
</style>
